/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-20 07:38:23
 */

import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import { Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./toolBaseRepeat.module.less";
import { RepeatType } from "#/type";

interface Iprops {
}

// 铺满工具按钮 Alt + T
export default function ToolBaseRepeat() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [visible, setVisible] = useState(false);
    const [disable, setDisable] = useState(false);
    const [repeat, setRepeat] = useState<RepeatType>(editorStore.repeat);

    useEffect(() => autorun(() => {
        const { activeObjectId, lock } = editorStore;
        setDisable(lock);
        const activeObject = designEditor.fabricCanvas.getActiveObject();
        if (activeObjectId && activeObject && activeObject.type === "image") {
            setVisible(true);
        } else {
            setVisible(false);
        }
    }), []);

    useEffect(() => autorun(() => {
        setRepeat(editorStore.repeat);
    }), []);

    return (
        <Tooltip
            title="基础平铺(p)"
            placement="top"
            mouseLeaveDelay={0}
            mouseEnterDelay={0.5}
        >
            <div
                onClick={() => {
                    designEditor.setRepeatType("base_repeat");
                }}
                className={clsx(styles.toolBaseRepeat, visible && styles.visible, repeat === "base_repeat" && styles.active, disable && styles.disable)}
            >
                基础平铺
            </div>
        </Tooltip>
    );

}